<template>
  <Accociation>
    <view class="contentAcc">
      <view class="title">“ 字词分析</view>
      <view class="contentText">
        开始实验时，屏幕中央会出现出一个词(启动词)，请你在看到这个启动词之后，立即按下键盘的“空格键”，开始计时。与此同时在看到启动词后，请你在第一时间将第一个出现在脑中的词汇(反应词)用语言回答出来。回答结束后再次按下键盘的“空格键”停止计时。随后屏幕中央会再出现启动词，请重复上述操作。如果你明白了上诉操作，就可以进行一个简短的练习。
      </view>
      <view class="step">
        <view class="stepNum">
          <view class="stepLine">
          </view>
          <view class="stepItem">
            <view class="item">
              <view class="itemYuan">1</view>
            </view>
            <view class="item">
              <view class="itemYuan">2</view>
            </view>
            <view class="item">
              <view class="itemYuan">3</view>
            </view>
          </view>
        </view>
        <view class="stepImage">
          <view class="stepImgItem">
            <view class="itemContent">
              <image src="/static/image/ass_first.png"></image>
            </view>
            <view class="itemText">看到词语，按下【空格键】</view>
          </view>
          <view class="stepImgItem">
            <view class="itemContent">
              <image src="/static/image/ass_second.png"></image>
            </view>
            <view class="itemText">请说出你想到的</view>
          </view>
          <view class="stepImgItem">
            <view class="itemContent">
              <image src="/static/image/ass_thired.png"></image>
            </view>
            <view class="itemText">答完之后，按下【空格键】</view>
          </view>
        </view>
      </view>
      <view class="beginBtn" @click="handleAnswer">
        开始练习
      </view>
    </view>
  </Accociation>
</template>

<script setup lang="ts">
import Accociation from '@/components/links/second.vue'
import {useRouter} from "vue-router";
import {onMounted} from "vue";

const router = useRouter()

const handleAnswer = () => {
  // #ifdef APP-PLUS
  uni.navigateTo({
    url: '/pages/association/association?type=test'
  })
  // #endif
  // #ifdef H5
  router.push('/pages/association/association?type=test')
  // #endif
}
</script>


<style scoped lang="scss">
.contentAcc {
  padding: 20rpx 56rpx 20rpx;

  .title {
    font-weight: bold;
    font-size: 23.4rpx;
    color: #00FFF2;
    letter-spacing: 2rpx;
  }

  .contentText {
    margin-top: 10rpx;
    font-weight: 400;
    font-size: 8.58rpx;
    color: #00FFF2;
    letter-spacing: 0;
    line-height: 15.6rpx;
  }

  .step {
    width: 386rpx;
    margin: 5rpx auto 0;
    display: flex;
    flex-direction: column;
    align-items: center;

    .stepNum {
      width: 294rpx;
      position: relative;

      .stepLine {
        position: absolute;
        width: 261.69rpx;
        height: 0.39rpx;
        border-bottom: 1.56rpx solid #08FFDF;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
      }

      .stepItem {
        display: flex;
        justify-content: space-between;

        .item {
          width: 31.98rpx;
          height: 31.98rpx;
          background: rgba(255, 255, 255, 0.3);
          border: 1.56rpx solid #08FFDF;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          z-index: 2;

          .itemYuan {
            width: 21.84rpx;
            height: 21.84rpx;
            background: #00FFF2;
            border-radius: 50%;
            line-height: 21.84rpx;
            font-size: 11.7rpx;
            color: #172E53;
            text-align: center;
            z-index: 2;

          }
        }
      }

    }

    .stepImage {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 5rpx;

      .stepImgItem {
        background-image: url("@/static/image/ass_border.png");
        width: 112rpx;
        height: 112rpx;
        background-size: 100% 100%;
        position: relative;

        .itemContent {
          width: 100%;
          height: 100%;

          image {
            width: 100%;
            height: 100%;
          }
        }

        .itemText {
          width: 100%;
          position: absolute;
          bottom: 15rpx;
          font-weight: 400;
          font-size: 7.02rpx;
          color: #00FFF2;
          letter-spacing: 0;
          text-align: center;
        }
      }
    }
  }

  .beginBtn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 24rpx;
    width: 125rpx;
    height: 37.11rpx;
    background-image: url('../../static/image/all_Btn.png');
    background-size: 100% 100%;
    margin-top: 15rpx;
    font-weight: 500;
    font-size: 10.92rpx;
    color: #FFFFFF;
    letter-spacing: 0;
    text-align: center;
    line-height: 37.11rpx;
  }
}
</style>
